<script setup>
  import { navList } from '../../utils/menu'
</script>

<template>
  <div class="menu-bar">
    <yk-space dir="vertical" :size="12">
      <router-link v-for="(item, index) in navList" :key="index" :to="item.path" class="menu_item">
        <yk-space align="center" class="meun_content_item">
          <component :is="item.icon" class="icon"/>
          <yk-text class="text">{{ item.name }}</yk-text>
        </yk-space>
      </router-link>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
  .menu-bar {
    width: 160px;
    margin: 16px;
    position: fixed;
    top: 72px;
    left: 8px;
    z-index: 1;

    .menu_item {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;

      &:hover {
        background-color: @bg-color-l;
        
        .text {
          font-weight: 600;
        }
      
      }

      .icon {
          color: @gray-5;
          width: 16px;
          height: 16px;
        }

      .meun_content_item {
        width: 100%;
        height: 100%;
        padding-left:16px;
      }
    }

    .router-link-active, .router-link-exact-active { 
      background: linear-gradient(180deg, rgba(43, 90, 237, 0.88) 0%, #2B5AED 100%);    
      
      .icon {
        color: @white;
      }

      .text {
        color: @white;
      }
    }
  }
</style>